I'm a little bit confused about what to use other than [(ngModel)]. As you can below the code snippet and images provided, ngModel binding is being applied to all other input fields when I click on the Edit button because of *NgFor. Could you guys please recommend me some suggestions?
Below is cart component template.
<div class="container my-5">
<h1>Your Cart</h1>
<div *ngFor="let item of listAlbums" class="container">
<div class="row">
<div class="col-md-4">
<h6>Item name: {{item.title}}</h6>
<img src="{{item.thumbnailUrl}}">
<input class="form-control" type="number" value="{{item.quantity}}">
<button (click)="remove(item)" class="btn btn-danger mx-3">X</button>
<button (click)="edit(item)" class="btn btn-warning">Edit</button>
<input type="text" placeholder="{{item.title}}" [(ngModel)]="newTitle" [hidden]="!hideEdit">
</div>
</div>
</div>
Below is the cart component.
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
listAlbums:Album[]=[]
hideEdit:boolean=false
newTitle:string;
constructor(private productService:ProductService) {
}
ngOnInit() {
this.productService.itemList.subscribe(data=>
{this.listAlbums = data })
}
remove(item:Album) {
this.productService.removeItem(item)
}
edit(item:Album) {
this.hideEdit = !this.hideEdit
this.productService.editItem(item, this.newTitle)
}
}You can just create an array and bind it to ngModel
<div class="container my-5">
<h1>Your Cart</h1>
<div *ngFor="let item of listAlbums; let i = index" class="container">
<div class="row">
<div class="col-md-4">
<h6>Item name: {{item.title}}</h6>
<img src="{{item.thumbnailUrl}}">
<input class="form-control" type="number" value="{{item.quantity}}">
<button (click)="remove(item)" class="btn btn-danger mx-3">X</button>
<button (click)="edit(item)" class="btn btn-warning">Edit</button>
<input type="text" placeholder="{{item.title}}" [(ngModel)]="newTitle[i]" [hidden]="!hideEdit">
</div>
</div>
</div>
newTitle = Array(listAlbums.length); // it will create an array of specific length.
This way you can bind all the inputs to specific array instance separately.
If you want the user to edit the title of individual items in cart, then bind to that item's title directly instead of updating the same string(newTitle) for all. Use [(ngModel)] = "item.title" in
<input type="text" placeholder="{{item.title}}" [(ngModel)]="item.title" [hidden]="!hideEdit">